<template>
  <div class="loginWindow">
    <el-form :model="userInfo" status-icon ref="userInfo" label-width="100px" class="form">
      <h2>图书管理系统登录界面</h2>
      <br>
      <el-form-item label="用户名" prop="username" class="loginForm">
        <el-input type="text" v-model="userInfo.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" class="loginForm">
        <el-input type="password" v-model="userInfo.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { goLogin } from '@/api/login'
export default {
  name: 'LoginPage',
  data () {
    return {
      userInfo: {
        username: 'admin',
        password: '123456'
      }
    }
  },

  methods: {
    // 登录
    async login () {
      const res = await goLogin(this.userInfo.username, this.userInfo.password)
      // 将token存入user模块的status
      this.$message({
        type: 'success',
        message: '登陆成功!'
      })
      // 将token提交到vuex
      this.$store.commit('user/setUserInfo', res.data)
      // 跳转到layout主页
      this.$router.replace('/layout')
    },
    // 重置表单
    reset () {
      this.userInfo.username = ''
      this.userInfo.password = ''
    }
  }

}
</script>

<style lang="less" scoped>
.loginWindow {
background-image: url('C:\Users\远赴人间惊鸿宴\Desktop\图书管理系统\QIANDUAN\before\src\assets\登陆背景.png');
background-size: cover;
height: 853px;
display: flex;
  justify-content: center;
  align-items: center;
// position: unset;
}

.form {
  width: 25%;
  margin: auto;
  // padding: 20% 30%
}

h2 {
  text-align: center;
  color: #606266;
}
// .loginScreen {
//   background-image: url('C:\Users\远赴人间惊鸿宴\Desktop\图书管理系统\QIANDUAN\before\src\assets\登陆背景.png');
//   // width: 100%;
//   // height: 100%;
//   background-size: cover;
//   position: relative;
// }

// .demo-userInfo {
//   width: 25%;
//   height: 853px;
//   // position:absolute;
//   top:40%;
//   left:40%
//   // margin: 300px 580px;
// }

</style>
